<template>
<el-scrollbar  class="menu">
  <el-menu mode='vertical' router class="el-menu-vertical-demo" background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
      <template v-for="item in data">
        <el-sub-menu :index="item.meta.id?.toString()" v-if="item.children.filter(x=>x.meta.showInLeft).length>0" :key="item.meta.id">
          <template #title>
            <!-- <el-icon><mostly-cloudy /></el-icon> -->
            <span>{{item.meta.title}}</span>
          </template>
          <el-menu-item v-for="c in item.children.filter(x=>x.meta.showInLeft)" :index="c.meta.id?.toString()" :route="item.path+'/'+c.path" >{{c.meta.title}}</el-menu-item>
        </el-sub-menu>

        <el-menu-item v-if="item.children.filter(x=>x.meta.showInLeft).length<=0" :index="item.meta.id?.toString()" :route="item.path" >{{item.meta.title}}</el-menu-item>
      </template>
    <!-- <el-sub-menu index="1">
      <template #title>
            <el-icon><mostly-cloudy /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1" route="/">item one</el-menu-item>            
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3" route="/page2">item three</el-menu-item>
          </el-menu-item-group>
    </el-sub-menu> -->
  </el-menu>
</el-scrollbar>
</template>

<script>
export default {
  data() {
    return {
      r:this.$router.getRoutes()
    }
  },
  computed:{
    data(){
      var rr=this.r.filter(x=> (x.meta.pid===0 || x.meta.pid===undefined) && x.meta.showInLeft)
      // console.log(rr);
      return rr
    }
  }
}
</script>

<style scoped>
  .menu{
    background-color: lightblue;
  }
</style>